<template>
    <el-dialog
    title="审核"
    :visible.sync="auditData.dialogState"
    size="small"
    class="dialog-box"
    @open='open'
    >
        <el-form v-loading='loading' :model="dataShow" :rules="rules" ref="dataShow" class="form-main" label-width="140px"  label-position='right'>
            <el-row :gutter="21" class="audit-item">
                <el-col :span="24">
                    <el-form-item label="学校名称：">
                       <span>{{dataShow.schoolName}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="服务名称：">
                        <span>{{dataShow.serviceName}}</span>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="收费金额：">
                       <span>{{dataShow.money}}元</span>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="收费方式：">
                        <span>{{!dataShow.chargeWay?'':dataShow.chargeWay=='1'?'月收':dataShow.chargeWay=='2'?'年收':''}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row class="audit-item">
                <el-col :span="24">
                    <el-form-item label="收费种类：" class="form-item"></el-form-item>
                    <div class="charge-type">
                        <ul class="ul-content">
                            <li class="li-title"><span>零售</span></li>
                            <li class="li-content">
                                <ul class="ul-list">
                                    <li>
                                        <ul class="ul-item ul-header">
                                            <li>份数</li>
                                            <li>原价</li>
                                            <li>现价</li>
                                        </ul>
                                    </li>
                                    <li v-for="item in dataShow.chargeTypeList" :key='item.id'>
                                        <ul class="ul-item">
                                            <li>{{item.name}}</li>
                                            <li>{{item.price}}元</li>
                                            <li>{{Number(item.discount).toFixed(2)}}元</li>
                                        </ul>
                                    </li>
                                </ul>
                           </li>
                        </ul>
                    </div>
                    <div class="charge-type" v-if="dataShow.sIsPack == '1' && dataShow.sNewPackList.length">
                        <ul class="ul-content">
                            <li class="li-title"><span>打包</span></li>
                            <li class="li-content">
                                <ul class="ul-list">
                                    <li>
                                        <ul class="ul-item ul-header">
                                            <li>份数</li>
                                            <li>原价</li>
                                            <li>打包价</li>
                                        </ul>
                                    </li>
                                    <li v-for="item in dataShow.sNewPackList" :key='item.id'>
                                        <ul class="ul-item">
                                            <li>{{item.name}}</li>
                                            <li>{{item.originalPrice}}元</li>
                                            <li>{{Number(item.price).toFixed(2)}}元</li>
                                        </ul>
                                    </li>
                                </ul>
                           </li>
                        </ul>
                    </div>
                </el-col>
            </el-row>
            <el-row class="audit-item">
                <el-col :span="24">
                    <el-form-item label="收费开始时间：">
                        <span>{{dataShow.startTime}}</span>
                    </el-form-item>
                </el-col>
                <!-- <el-col :span="24" v-if="dataShow.sCreateTime==dataShow.sUpdateTime">
                    <el-form-item label="请设置分成比例：" prop="setProportion" :rules="rules.setProportion">
                        <el-input v-model="dataShow.setProportion" :maxlength="3" style="width:40%;"></el-input>&nbsp;&nbsp;%
                    </el-form-item>
                </el-col> -->
                <el-col :span="24">
                    <el-form-item label="分成比例：">
                        <span>{{dataShow.proportion}}%</span>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="resetForm('dataShow')">不通过</el-button>
            <el-button type="primary" @click="submitForm('dataShow')">确认通过</el-button>
        </div>
    </el-dialog>
</template>

<script>
    import { updatePayRecord } from 'api/serviceManage';
    export default {
        props: {
            auditData: {
                type: Object,
                required: true
            }
        },
        data() {
            return {
                loading: false,
                dataShow: {
                    schoolName: '',
                    serviceName: '',
                    money: '',
                    chargeWay: '',
                    chargeTypeList: [],
                    sNewPackList: [],
                    startTime: '',
                    proportion: '',
                    sCreateTime: '',
                    sUpdateTime: '',
                    sIsPack: '0'
                    // setProportion: '0'
                    
                },
                rules: {
                    // setProportion: [
                    //     { required: true, message: '内容不能为空'},
                    //     { pattern: /^[0-9]*$/, message: '请输入0~100的整数'},
                    //     { validator: (rule, value, callback) => {
                    //         if (Number(value)<0 || Number(value)>100) {
                    //             callback(new Error('请输入0~100的整数'));
                    //         } else {
                    //             callback();
                    //         }
                    //     }, trigger: 'blur' }
                    // ]
                }
            }
        },
        computed: {
            
        },
        methods: {
            open() {
                this.dataShow.schoolName = this.auditData.dataList.sSchoolName;
                this.dataShow.serviceName = this.auditData.dataList.sServiceName;
                this.dataShow.money = this.auditData.dataList.sMoney;
                this.dataShow.chargeWay = this.auditData.dataList.sPayTypeNew;
                this.dataShow.chargeTypeList = JSON.parse(this.auditData.dataList.sNewTimeNum);
                this.dataShow.sNewPackList = JSON.parse(this.auditData.dataList.sNewPackTimeNum);
                this.dataShow.startTime = this.auditData.dataList.sPayStartTime;
                this.dataShow.proportion = this.auditData.dataList.sDividedPercentage;
                this.dataShow.sCreateTime = this.auditData.dataList.sCreateTime;
                this.dataShow.sUpdateTime = this.auditData.dataList.sUpdateTime;
                this.dataShow.sIsPack = this.auditData.dataList.sIsPack;
            },
            submitForm(dataShow) {
                this.$refs[dataShow].validate((valid) => {
                    if (valid) {
                        let pId = this.auditData.dataList.pId; // 收费记录ID
                        let sStatus = '2'; // 状态(0:未开通，1：审核中，2：已开通，3:审核未通过)
                        // let sDividedPercentage = Number(this.dataShow.setProportion);
                        this.loading = true;
                        updatePayRecord(pId, sStatus).then(response => {
                            this.loading = false;
                            this.$message.success(response.data.errorMsg);
                            this.auditData.dialogState = false;
                            this.$emit('search');
                        }).catch(() => {
                            this.loading = false;
                        });
                    }
                })
            },
            resetForm(dataShow) {
                this.$refs[dataShow].validate((valid) => {
                    if (valid) {
                        let pId = this.auditData.dataList.pId; // 收费记录ID
                        let sStatus = '3'; // 状态(0:未开通，1：审核中，2：已开通，3:审核未通过)
                        let sDividedPercentage = Number(this.dataShow.setProportion);
                        this.loading = true;
                        updatePayRecord(pId, sStatus, sDividedPercentage).then(response => {
                            this.loading = false;
                            this.$message.success(response.data.errorMsg);
                            this.auditData.dialogState = false;
                            this.$emit('search');
                        }).catch(() => {
                            this.loading = false;
                        });
                    }
                })
            }
        }
    }

</script>

<style lang="scss">
     @import "src/styles/mixin.scss";
     @include scrollBar;
    .dialog-box{
        .el-dialog--small {
            width: 700px;
        }
        .el-dialog__header{
            text-align:center;
            background:#f7f7f9;
            height:54px;
            .el-dialog__title{
                font-size:20px;
                color:#333;
            }
        }
        .form-main{
            font-size: 12px;
            color: #333;
            width: 90%;
            margin: 0 auto; 
            max-height: 520px;
            overflow-y: auto;
            .audit-item {
               width: 100%;
            }
            ul {
                list-style: none;
                .charge-type {
                    padding-right: 6px;
                }
            }
            // .ul-css {
            //      max-height: 600px;
            //      overflow-y: scroll;
            // }
            .form-item {
                margin-bottom:0px;
            }
            .charge-type {
                overflow:hidden;
                margin-left: 60px;
                font-size:14px;
                color:#333;
                margin-bottom: 22px;
                ul,li{ padding:0;margin:0;list-style:none;}
                .ul-content {
                    float:left;
                    border: 1px solid #ddd;
                    display: flex;
                    .li-title {
                        width: 80px;
                        align-self: center;
                        text-align: center;
                    }
                    >li {
                        float:left;
                        .ul-list {
                            overflow: hidden;
                            >li {
                               overflow: hidden; 
                            }
                            .ul-item {
                                float:left;
                                li {
                                    overflow: hidden;
                                    float:left;
                                    height: 30px;
                                    line-height: 30px;
                                    width: 120px;
                                    text-align: center;
                                    border-right: 1px solid #ddd;
                                    border-bottom: 1px solid #ddd;
                                }
                                li:nth-child(1) {
                                    border-left: 1px solid #ddd;
                                }
                                li:last-child {
                                    border-right: none;
                                }
                               
                            }
                            .ul-header {
                                li {
                                    color: #999;
                                    background-color: #f3f3f3;
                                }
                            }
                            >li:last-child {
                                li {
                                    border-bottom: none;
                                }
                            }
                        }
                    }
                }

            }
        }
        .dialog-footer{
            width: 90%;
            margin: 0 auto; 
            text-align:center;
        }
    }
</style>